position
|
|
|
|
|
|
|||||||||
|
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
|
Частково |
Частково |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Так |
Коротка
інформація
|
CSS |
CSS2 |
|
Значення за умовчанням |
static |
|
Наслідує |
Так |
|
Застосовується |
До усіх елементів, за винятком генерованих |
|
Аналог HTML |
Ні |
|
Посилання на специфікацію |
http://www.w
3.org/TR/CSS21/visuren.html#propdef - position |
Опис
Встановлює
спосіб позиціонування елементу відносно вікна браузеру або інших об'єктів на
веб-сторінці.
Синтаксис
position:
absolute | fixed | relative | static | inherit
Значення
absolute
Вказує, що елемент абсолютно позиціонується. В цьому
випадку він не існує в звичайному потоці документу подібно до інших елементів,
які відображаються на веб-сторінці немов об'єкту, що абсолютно позиціонується,
і немає. Положення елементу задається властивостями left, top, right і bottom
відносно краю вікна браузеру.
fixed
По своїй дії це значення близьке до absolute, але на
відміну від нього прив'язується до вказаної властивостями left, top, right і
bottom точці на екрані і не міняє свого положення при прокрутці веб-сторінки.
Браузери Netscape і Firefox взагалі не відображають смуги прокрутки, якщо
положення елементу задане фіксованим, і воно не поміщається цілком у вікно
браузеру. У браузері Opera хоча і показуються смуги прокрутки, але вони ніяк не
впливають на позицію елементу. Internet Explorer 6 і нижче не підтримує це значення.
relative
Положення елементу встановлюється відносно його
початкового місця. Додавання властивостей left, top, right і bottom змінює
позицію елементу і зрушує його в ту або іншу сторону від первинного
розташування.
static
Елементи відображаються як завжди. Використання
властивостей left, top, right і bottom не призводить до яких-небудь
результатів.
inherit
Наслідує значення батька.
Приклад
HTML 4.0
CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251"> <title>position</title> </head> <body> <div style="font - family: Times, serif; font - size: 200%"> T<span style="position: relative; top: 10px">E</span>X і L<span style="position: relative; top: - 5px; font - size: 80%">A</span>T<span style="position: relative; top: 10px">E</span>X </div> </body></html>
Результат
цього прикладу показаний ні мал. 1.
Мал. 1. Застосування властивості position
Об'єктна модель
[window.]document.getElementById("elementID").style.position
Браузери
Браузер
Internet Explorer 6 значення fixed не підтримує. Internet Explorer до сьомої
версії включно не підтримує значення inherit.
